<template>
  <div class="position-list-wrapper">
    <FPage class="position-list-top">
      <template #header>
        <div style="padding: 5px">
          <el-tree-select
            style="width: 100%"
            v-model="selectedUnit"
            :data="unitTree" default-expand-all
            check-strictly node-key="id"
            :props="defaultProps"
            @change="loadPositions"
            :render-after-expand="false"
          />
        </div>
      </template>
      <FListV2 @select="positionSelect" @doubleClick="createPositionConfig"
               :selected-key="positionSelectedKey"
               :data-source="positions" size="small"
               title-name="positionName"></FListV2>
    </FPage>
    <div class="position-list-bottom" v-loading="loading">
      <FListV2 @select="userSelect" @doubleClick="createUserConfig"
               :selected-key="userSelectedKey"
               :data-source="users" size="small"
               title-name="realname"></FListV2>
    </div>
  </div>
</template>

<script setup>
import {getAction} from '@/request/BaseRequest';
import {UserConfig} from '@/components/UserSelectorModal/DefaultUserConfig';
import {guid, isEmpty, listToTrees, real} from '@/utils/CommonUtils';
import {onMounted, shallowRef} from 'vue';
import FListV2 from '@/components/FListV2/index.vue';
import {useStore} from 'vuex';
import FPage from '@/components/layout/FPage.vue';

const positionSelectedKey = shallowRef();
const userSelectedKey = shallowRef();
const loading = shallowRef(false);
const positions = shallowRef([]);
const users = shallowRef([]);
const emits = defineEmits(['create']);
const selectedUnit = shallowRef();
const unitTree = shallowRef([]);
let userInfo = undefined;
const store = useStore();
const defaultProps = {
  children: 'children',
  label: 'unitName',
};

onMounted(() => {
  userInfo = real(store.getters['user/userInfo']);
  selectedUnit.value = userInfo.unitId;
  loadPositions();
  loadUnits();
});

function loadUnits() {
  getAction('/sys/unit/loadUnits').then(data => {
    if (data.success) {
      let result = data.result;
      setUnitTree(result);
    }
  });
}

function setUnitTree(list) {
  if (isEmpty(list)) list = [];
  unitTree.value = listToTrees(list);
}

function positionSelect(position) {
  positionSelectedKey.value = position.id;
  loadUsers();
}

function loadUsers() {
  loading.value = true;
  getAction('/base/loadUserByPositionId',
    {positionId: real(positionSelectedKey)}).then(data => {
    loading.value = false;
    if (data.success) {
      users.value = data.result;
    }
  });
}

function userSelect(user) {
  userSelectedKey.value = user.id;
}

function createUserConfig(user) {
  let res = JSON.parse(JSON.stringify(UserConfig));
  res.type = 'user';
  res.configName = user.realname;
  res.userName = user.realname;
  res.userId = user.id;
  res.id = guid();
  emits('create', res);
}

function loadPositions() {
  loading.value = true;
  getAction('/base/basePosition/queryByUnitId', {
    unitId: real(selectedUnit)
  }).then(data => {
    loading.value = false;
    if (data.success) {
      let result = data.result;
      if (!data.result) data.result = [];
      positions.value = result;
    }
  });
}

function createPositionConfig(position) {
  let res = JSON.parse(JSON.stringify(UserConfig));
  res.type = 'position';
  res.configName = position.positionName;
  res.positionName = position.positionName;
  res.positionId = position.id;
  res.id = guid();
  emits('create', res);
}

</script>

<script>
export default {
  name: 'PositionList'
};
</script>

<style scoped>
.position-list-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.position-list-top,
.position-list-bottom {
  flex: 0.5;
  overflow: auto;
}

.position-list-center {
  border-color: rgb(220, 223, 230);
  border-width: 1px 0 1px 0;
  border-style: solid;
  padding: 5px 10px;
}

</style>
